import React, { Component } from 'react'
import '../css/cart.css'
import { delCart, getCartList } from '../request/api'

export default class Order extends Component {
    constructor() {
        super()
        this.state = {
            cartListsp: [],
            cartListbrt: [],
            check: '0',//小u
            check2: '0',//万人团
            checkall: '0',//全选
            numPrice:0
        }
    }
    render() {
        const { cartListsp, cartListbrt, check, check2, checkall,numPrice } = this.state
        return (
            <div className="ccc">
                <div className="cart">
                    <div className="top">
                        <div className="title">购物车</div>
                        <div className="detail-top">
                            <div className="good-top">全部(20)</div>
                            <div className="good-top">降价(4)</div>
                            <div className="good-top">常卖</div>
                            <div className="good-top">分类</div>
                        </div>
                    </div>
                    <div className="aaa">
                        <div className="rep">
                            <div className="xiaoU">
                                <div className="xiaoUl">
                                    <input type="checkbox" value="1" checked={check === '1'} onChange={(e) => this.spall(e)} />小U自营
                                </div>
                                <div className="xiaoUr">
                                    <span>已免运费</span>
                                    <span>|</span>
                                    <span>领券</span>
                                </div>
                            </div>
                            <div className="shopping-content">
                                {cartListsp.map((item, index) => (
                                    <div className="c-shopping-box" key={item.id} >
                                        <input type="checkbox" onChange={() => this.checkone(index)} checked={item.checked} />
                                        <img src={this.$pregImg + item.img} />
                                        <div className="shopping-r">
                                            <p>
                                                {item.goodsname}
                                                <button className='v-button' onClick={() => this.del(item.id, index, 1)}>删除</button>
                                            </p>
                                            <div className="shopping-b">
                                                <div className="b-l">
                                                    <span>
                                                        <b>&yen;</b>
                                                        {item.price.toFixed(2)}
                                                    </span>
                                                    <span>￥{item.price.toFixed(2)}</span>
                                                </div>

                                                <div className="b-r">
                                                    <span >-</span>
                                                    <span>{item.num}</span>
                                                    <span >+</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div >
                        <div className="rep">
                            <div className="xiaoU">
                                <div className="xiaoUl">
                                    <input type="checkbox" value="2" checked={check2 === '2'} onChange={(e) => this.brtall(e)} />百人团
                                </div>
                                <div className="xiaoUr">
                                    <span>已免运费</span>
                                    <span>|</span>
                                    <span>领券</span>
                                </div>
                            </div>
                            <div className="shopping-content">
                                {cartListbrt.map((item, index) => (
                                    <div className="c-shopping-box" key={item.id} >
                                        <input type="checkbox" onChange={() => this.checkones(index)} checked={item.checked} />
                                        <img src={this.$pregImg + item.img} />
                                        <div className="shopping-r">
                                            <p>
                                                {item.goodsname}
                                                <button className='v-button' onClick={() => this.del(item.id, index, 2)}>删除</button>
                                            </p>
                                            <div className="shopping-b">
                                                <div className="b-l">
                                                    <span>
                                                        <b>&yen;</b>
                                                        {item.price.toFixed(2)}
                                                    </span>
                                                    <span>￥{item.price.toFixed(2)}</span>
                                                </div>

                                                <div className="b-r">
                                                    <span >-</span>
                                                    <span>{item.num}</span>
                                                    <span >+</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div >
                    </div >
                    <div className="all-box">
                        <div className="all-l">
                            <input type="checkbox" value='3' onChange={(e) => { this.all(e) }} checked={checkall === '3'} />
                            <label>全选</label>
                        </div>
                        <div className="total">
                            <span>合计</span>
                            <span>已免运费</span>
                        </div>
                        <div className="all-money">
                            <span>&yen;{numPrice.toFixed(2)}</span>
                            <span>已优惠&yen;{numPrice.toFixed(2)}元</span>
                        </div>
                        <div className="sum-money">结算</div>
                    </div >
                </div >
            </div >
        )
    }
    componentDidMount() {
        if (!JSON.parse(sessionStorage.getItem('user'))) {
            this.props.history.push('/phonelogin')
        } else {
            let uid = JSON.parse(sessionStorage.getItem('user')).uid
            getCartList({ uid }).then(res => {
                if (res.code === 200) {
                    res.list[1].content.map(item => (item.checked = false))
                    res.list[0].content.map(item => (item.checked = false))
                    this.setState({ cartListsp: res.list[1].content })
                    this.setState({ cartListbrt: res.list[0].content })

                }
            })
        }
    }
    spall(e) {//商品全选
        if (this.state.check2 === '2') {//判断另一个选没选
            this.setState({ checkall: '3' })
        }
        if (this.state.check === e.target.value) {
            this.setState({ check: '0' })
            this.state.cartListsp.map(item => (
                item.checked = false
            ))
            this.setState({ checkall: '0' })
        }
        else {
            this.setState({ check: e.target.value })
            this.state.cartListsp.map(item => (
                item.checked = true
            ))
        }
        this.allprice()

    }
    checkone(index) {//一个商品
        if (this.state.check2 === '2') {//判断另一个选没选
            this.setState({ checkall: '3' })
        }
        let obj = this.state.cartListsp[index]
        if (obj.checked || !obj.checked) {
            obj.checked = !obj.checked
        }
        this.state.cartListsp.splice(index, 1, obj)//把原来的删除,再用新的替换
        this.setState({ cartListsp: this.state.cartListsp })
        if (this.state.cartListsp.every(item => (item.checked === true))) {//全选的时候
            this.setState({ check: '1' })
        }
        if (this.state.cartListsp.some(item => (item.checked === false))) {//有一个没选中,就不选中全选
            this.setState({ check: '0' })
            this.setState({ checkall: '0' })
        }
        this.allprice()


    }
    brtall(e) {//百人团全选
        if (this.state.check === '1') {//判断另一个选没选
            this.setState({ checkall: '3' })
        }
        if (this.state.check2 === e.target.value) {
            this.setState({ check2: '0' })
            this.state.cartListbrt.map(item => (
                item.checked = false
            ))
            this.setState({ checkall: '0' })
        }
        else {
            this.setState({ check2: e.target.value })
            this.state.cartListbrt.map(item => (
                item.checked = true
            ))
        }
        this.allprice()
    }
    checkones(index) {//一个团
        if (this.state.check === '1') {//判断另一个选没选
            this.setState({ checkall: '3' })
        }
        let obj = this.state.cartListbrt[index]
        if (obj.checked || !obj.checked) {
            obj.checked = !obj.checked
        }
        this.state.cartListbrt.splice(index, 1, obj)//把原来的删除,再用新的替换
        this.setState({ cartListbrt: this.state.cartListbrt })
        if (this.state.cartListbrt.every(item => (item.checked === true))) {//全选的时候
            this.setState({ check2: '2' })
        }
        if (this.state.cartListbrt.some(item => (item.checked === false))) {//有一个没选中,就不选中全选
            this.setState({ check2: '0' })
            this.setState({ checkall: '0' })
        }
        this.allprice()

    }
    all(e) {
        if (this.state.checkall === e.target.value) {
            this.setState({ checkall: '0' })
            this.setState({ check: '0' })
            this.setState({ check2: '0' })
            this.state.cartListsp.map(item => (
                item.checked = false
            ))
            this.state.cartListbrt.map(item => (
                item.checked = false
            ))
        } else {
            this.setState({ checkall: e.target.value })
            this.setState({ check: '1' })
            this.setState({ check2: '2' })
            this.state.cartListsp.map(item => (
                item.checked = true
            ))
            this.state.cartListbrt.map(item => (
                item.checked = true
            ))
        }
        this.allprice()

    }
    del(id, index, type) {
        delCart({ id }).then(res => {
            if (res.code === 200) {
                if (type === 2) {
                    let obj = this.state.cartListbrt
                    obj.splice(index, 1)
                    this.setState({ cartListbrt: obj })
                }else{
                    let obj = this.state.cartListsp
                    obj.splice(index, 1)
                    this.setState({ cartListsp: obj })
                }
            }
        })
    }
    allprice(){//价格
        const {cartListsp,cartListbrt}=this.state
        let all=0
        cartListsp.map(
            item=>{
                if(item.checked){
                    all+=item.price*item.num
                }
            }
        )
        cartListbrt.map(
            item=>{
                if(item.checked){
                    all+=item.price*item.num
                }
            }
        )
        // console.log(all);
        this.setState({numPrice:all})

    }
}
